<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #banner{
            width: 3.23rem;
            height: 1.45rem;
            margin: 0.735rem auto 0;
            background: #76d1a7;
        }
        #content{
            width: 3.23rem;
            padding-top: 0.2rem;
            margin: 0 auto;
            display:flex;
            justify-content: space-between;
        }

        #content .left{
            width: 0.63rem;
            height: 2.035rem;
            background: #c464a5;
        }
        #content .right{
            width: 2.38rem;
            height: 3.25rem;
            background: #697cc3;
        }
    </style>
</head>
<body>
    <div id="banner"></div>
    <div id="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <script>
        function adapter(){
            let size = 100 * document.documentElement.clientWidth / 375;
            document.documentElement.style.fontSize = size + 'px';
        }
        adapter();
        window.onresize = adapter;


    </script>
    
</body>
</html>